<template>
  <div class="CSmoudel">
    <div class="ceshi">
      <PublicfourHistogram
        seriesType="pie"
        seriesType1="bar"
        seriesType2="bar"
        seriesType3="bar"
        chartId="ZqtjEcharts"
        title
        seriesName="蓝色预警"
        :seriesData="seriesData"
        :seriesData1="seriesData1"
        :seriesData2="seriesData2"
        :seriesData3="seriesData3"
      />
    </div>
    <div class="ceshi">
      <PublicthreeHistogram
        seriesType="bar"
        seriesType1="bar"
        seriesType2="bar"
        chartId="ZqtjthreeEcharts"
        title
        seriesName="山体滑坡"
        seriesName1="泥石流"
        seriesName2="崩塌"
        :xData="xthreeData"
        :seriesData="seriesthreeData"
        :seriesData1="seriesthreeData1"
        :seriesData2="seriesthreeData2"
      />
    </div>
    <div class="ceshi">
      <PublicfourlineChart
        seriesType="line"
        seriesType1="line"
        seriesType2="line"
        seriesType3="line"
        chartId="linefourEcharts"
        title
        seriesName="有感地震"
        seriesName1="中强震"
        seriesName2="强震"
        seriesName3="大地震"
        :xData="xfourlineData"
        :seriesData="serieslinefourData"
        :seriesData1="serieslinefourData1"
        :seriesData2="serieslinefourData2"
        :seriesData3="serieslinefourData3"
      />
    </div>
    <!--  圆形进度条  -->
    <div class="ceshi">
      <PublictheelineChart
        seriesType="line"
        seriesType1="line"
        seriesType2="line"
        chartId="linethreeEcharts"
        title
        seriesName="山体滑坡"
        seriesName1="泥石流"
        seriesName2="崩塌"
        :xData="xthreelineData"
        :seriesData="serieslinethreeData"
        :seriesData1="serieslinethreeData1"
        :seriesData2="serieslinethreeData2"
      />
    </div>
    <div class="ceshi">
      <PubliccircularProgressbar
        chartId="piethreeEcharts"
        :title="pietitle"
        subtitle="气象干旱"
        titleColor="#2FB4FF"
        seriesColor1="#6648FF"
        seriesColor2="#00AEF3"
        :seriesData="seriespieData"
        :Radius="Radius"
      />
    </div>
    <!-- 水球图使用 -->
    <div class="ceshi">
      <PublicwaterpoloDiagram chartId="warterech" />
    </div>
  </div>
</template>

<script>
import PublicfourHistogram from "./PubliccomponentLibrary/PublicfourHistogram";
import PublicthreeHistogram from "./PubliccomponentLibrary/PublicthreeHistogram";
import PublicfourlineChart from "./PubliccomponentLibrary/PublicfourlineChart";
import PublictheelineChart from "./PubliccomponentLibrary/PublictheelineChart";
// 圆形进度条
import PubliccircularProgressbar from "./PubliccomponentLibrary/PubliccircularProgressbar";
// 水球图
import PublicwaterpoloDiagram from "./PubliccomponentLibrary/PublicwaterpoloDiagram";

export default {
  components: {
    PublicfourHistogram,
    PublicthreeHistogram,
    PublicfourlineChart,
    PublictheelineChart,
    // 圆形进度条
    PubliccircularProgressbar,
    // 注册水球图
    PublicwaterpoloDiagram,
  },
  data() {
    return {
      xData: ["银川市", "石嘴山市", "吴忠市", "固原市", "中卫市"],
      seriesData: [24, 18, 13, 10, 8],
      seriesData1: [15, 5, 3, 22, 10],
      seriesData2: [6, 8, 3, 7, 4],
      seriesData3: [2, 2, 2, 2, 2],
      xthreeData: ["银川市", "石嘴山市", "吴忠市", "固原市", "中卫市"],
      seriesthreeData: [15, 9, 14, 17, 7],
      seriesthreeData1: [18, 22, 8, 20, 23],
      seriesthreeData2: [22, 18, 25, 14, 20],
      xfourlineData: ["8月", "9月", "10月", "11月", "12月"],
      serieslinefourData: [20, 13, 19, 18, 19],
      serieslinefourData1: [10, 8, 6, 12, 17],
      serieslinefourData2: [3, 4, 3, 14, 8],
      serieslinefourData3: [0, 1, 0, 1, 1],
      xthreelineData: ["8月", "9月", "10月", "11月", "12月"],
      serieslinethreeData: [15, 6, 12, 6, 14],
      serieslinethreeData1: [10, 17, 5, 8, 11],
      serieslinethreeData2: [20, 10, 16, 22, 5],
      // 圆形进度条 参数设定
      seriespieData: (53 / 74).toFixed(2) * 100,
      pietitle: 53 + "起",
      Radius: ["40%", "45%"],
    };
  },
};
</script>

<style>
.CSmoudel {
  width: 100%;
  height: 100%;
  float: left;
}
.ceshi {
  width: 25%;
  height: 202px;
  background: #000;
}
</style>